<template>
  <div class="epi">
    <div v-if="arr.length > 0">
      <div class="input-group">
        <input
          type="text"
          v-model="item"
          style="width: 300px; margin-left: 20px; margin-right: 10px"
          placeholder="请输入查询的城市"
          @keyup.enter="handleCity(item)"
        />
        <button class="input-group-addon" @click="handleCity(item)">
          查询
        </button>
      </div>
      <div>
        <van-grid>
          <van-grid-item
            v-for="(item, index) in arr"
            :key="index"
            icon="photo-o"
            :text="item"
            @click="handleCity(item)"
          />
        </van-grid>
      </div>
    </div>
    <div v-else></div>
  </div>
</template>
<script>
import { getEpidemic } from '@/api/epidemic.js'
import { ref } from 'vue'

export default {
  data() {
    return {
      item: '',
      value: '北京',
      arr: ['北京', '上海', '长沙', '吉林', '长春', '邯郸', '沧州', '廊坊', '邢台', '益阳', '怀化', '常德', '唐山', '石家庄', '广州', '济南', '海南', '青岛', '天津', '衡阳']
    }
  },
  created() {
    this.getEpidemic()
  },
  methods: {
    async getEpidemic() {
      const res = await getEpidemic(this.value)
      console.log(res)
    },
    handleCity(item) {
      // console.log(item)
      this.$router.push('/home/detail/' + item || this.item)
    }
  },
  setup() {
    const value = ref('')
    return { value }
  }
}
</script>
<style lang="sass" scoped>
.my-swipe
  height: 200px
  background-color: red
</style>